<!DOCTYPE HTML>
<HTML>
    <head>
        <meta charset="UTF-8">
        <title>WebSocket Demo</title>
    </head>
    <body>
        <input id="text" type="text" />
        <button onclick="send()">发送消息</button>
        <button onclick="closeWebSocket()">关闭连接</button>
        <div id="message">
        </div>
    </body>
    <script type="text/javascript">
        var websocket = null;
        var clientId = Math.random().toString(36).substr(2);

        // 判断当前浏览器是否支持WebSocket
        if('WebSocket' in window) {
        // 连接WebSocket节点
        websocket = new WebSocket("ws://localhost:8080/ws/" + clientId);
        }
        else {
        alert('Not support websocket');
        }

        // 连接发生错误的回调方法
        websocket.onerror = function() {
        setMessageInnerHTML("error");
        };

        // 连接成功建立的回调方法
        websocket.onopen = function() {
        setMessageInnerHTML("连接成功");
        }

        // 接收到消息的回调方法
        websocket.onmessage = function(event) {
        setMessageInnerHTML(event.data);
        }

        // 连接关闭的回调方法
        websocket.onclose = function() {
        setMessageInnerHTML("close ");
        }

        // 监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
        window.onbeforeunload = function() {
        websocket.close();
        }

        // 将消息显示在网页上
        function setMessageInnerHTML(innerHTML) {
        document.getElementById('message').innerHTML += innerHTML + '<br/>';
        }

        // 发送消息
        function send() {
        var message = document.getElementById('text').value;
        websocket.send(message);
        }

        // 关闭连接
        function closeWebSocket() {
        websocket.close();
        }
    </script>
</HTML>